<template>
    <div class="mainHeader" id="mainHeader">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1" class="logo"><img src="../../../static/img/clearOff.png" /></el-menu-item>
            <el-menu-item index="4" class="user">
                <img src="static/img/user.jpeg">
                <a href="#">{{username}}</a>
                <span class="clearOff"></span>
                <ul class="menuMore">
                    <!-- <li>关于我们</li> -->
                    <li @click="quit">退出登录</li>
                </ul>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeIndex: '1',
                name: '八千里路'
            }
        },
        computed: {
            username() {
                var self = this;
                let username = self.$common.getSessionStorage('username');
                return username ? username : self.name;
            }
        },
        methods: {
            handleSelect() {
                console.info(1);
            },
            quit() {
                var self = this;
                self.$common.removeSessionStorage('token');
                self.$router.push('/login');
            }
        }
    }
</script>

<style scoped>
    .mainHeader {
        background: #1f2531;
    }
    
    .el-menu--horizontal {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        height: 55px;
        background: transparent;
        color: #fff;
        border-bottom: none;
        margin: 0 auto;
    }
    
    .el-menu--horizontal::before,
    .el-menu--horizontal::after {
        content: none;
    }
    
    .el-menu--horizontal .el-menu-item {
        background: transparent!important;
        color: #FFFFFF!important;
    }
    
    .el-menu--horizontal .el-menu-item:hover,
    .el-menu--horizontal .el-menu-item:link,
    .el-menu--horizontal .el-menu-item:visited,
    .el-menu--horizontal .el-menu-item:active {
        background: rgba(255, 255, 255, 0.02)!important;
    }
    
    .el-menu--horizontal .el-menu-item.user {
        position: relative;
    }
    
    .el-menu--horizontal .el-menu-item.user img {
        width: 30px;
        height: 30px;
        border-radius: 32px;
        border: 1px solid #666;
        padding: 2px;
        margin-right: 5px;
    }
    
    .el-menu--horizontal>.el-menu-item.is-active {
        border-bottom-color: transparent;
    }
    
    .el-menu--horizontal .el-menu-item a {
        /* display: inline-block; */
        width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .el-menu--horizontal .el-menu-item .clearOff {
        width: 23px;
        height: 19px;
        background-image: url(../../../static/img/shai.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px;
        /* margin-left: 5px; */
    }
    
    .el-menu--horizontal .el-menu-item.user .menuMore {
        display: none;
        position: absolute;
        left: 0;
        top: 58px;
        width: 100%;
        background: #1f2531;
        z-index: 100;
    }
    
    .el-menu--horizontal .el-menu-item.user:hover .menuMore {
        display: block;
    }
    
    .el-menu--horizontal .el-menu-item.user .menuMore li {
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-top: 1px solid #666;
    }
</style>